import { useEffect, useState } from 'react'
import { Form, message, Modal, Button, Radio, InputNumber } from 'antd'
import moment from 'moment'

// import request from '@/utils/request'
// import { useAppSelector } from '@/utils/hooks'
// import { formatDate } from '@/utils/util'
import { IForm } from '@/components'
import { FormItemConfig } from '@/components/FormItem'
import type { Params } from "@/views/AuthManage/UserManage/type";

interface Props {
	onOk?: () => void
}

const SettingModal: React.FC<Props> = ({ onOk }) => {
	// const [app] = useAppSelector(state => [state.app])
	const [open, setOpen] = useState(false)
	const [form] = Form.useForm()
	const [loading, setLoading] = useState(false)

	const type = Form.useWatch('type', form)
	const updateRatioType = Form.useWatch('updateRatioType', form)

	useEffect(() => {
		if (open) {
			queryRegistrationRule()
		}
	}, [open])

	const queryRegistrationRule = () => {
		const data = { entityId: 1 }

		// request('bikeManageQueryRegistrationRule', { data }).then(res => {
		//   if (res.code === 0 && res.data) {
		//     const { windowStartTime, windowEndTime, ...rest } = res.data
		//     form.setFieldsValue({
		//       ...rest,
		//       rangePicker:
		//         windowStartTime && windowEndTime
		//           ? [moment(new Date(windowStartTime)), moment(new Date(windowEndTime))]
		//           : [],
		//     })
		//   }
		// })
	}

	const handleCancelClick = () => {
		// Modal.confirm({
		//   title: '提示',
		//   content: `是否确认取消本次操作？取消后将需要重新编辑`,
		//   onOk() {
		//     handleCancel()
		//   },
		// })
		handleCancel();
	}

	const handleOk = async () => {
		try {
			const values = await form.validateFields()
			const { rangePicker = [], ...rest } = values || {}
			const data = {
				...rest,
				// windowStartTime: formatDate(rangePicker[0]) || undefined,
				// windowEndTime: formatDate(rangePicker[1]) || undefined,
				// entityId: app.currentEntity.entityId,
			}
			setLoading(true)

		} catch (error) {
			console.error(error)
		}
	}

	const handleCancel = () => {
		form.resetFields()
		setOpen(false)
	}

	const formItemsConfig: FormItemConfig[] = [
		{
			type: 'radioGroup',
			formItemProps: {
				label: '可备案时间',
				name: 'type',
				initialValue: 1,
			},
			childProps: {
				options: [
					{ label: '随时', value: 1 },
					{ label: '窗口期限制', value: 2 },
				],
			},
		},
		type === 2
			? {
				type: 'dateRangePicker',
				formItemProps: {
					label: '日期选择',
					name: 'rangePicker',
					rules: [{ required: true, message: '请选择' }],
				},
				childProps: {
					format: 'YYYY-MM-DD',
					// disabledDate(current) {
					//   return current && current < moment().startOf('day')
					// },
				},
			}
			: null,
		type === 2
			? {
				type: 'select',
				formItemProps: {
					label: '重复',
					name: 'repeatType',
					rules: [{ required: true, message: '请选择' }],
				},
				childProps: {
					options: [
						{ label: '不重复', value: 1 },
						{ label: '每周', value: 2 },
						{ label: '每月', value: 3 },
					],
				},
			}
			: null,
		{
			type: 'input',
			itemRender: () => {
				return (
					<>
						<Form.Item
							required
							label="每月可更新备案比例"
							labelCol={{ span: 6 }}
							style={{ marginBottom: 0 }}
						>
							<Form.Item
								name="updateRatioType"
								rules={[{ required: true, message: '请选择' }]}
								style={{ display: 'inline-block', width: '50' }}
								initialValue={1}
							>
								<Radio.Group
									options={[
										{ label: '不限制', value: 1 },
										{ label: '百分比', value: 2 },
									]}
								></Radio.Group>
							</Form.Item>
							{updateRatioType === 2 && (
								<Form.Item
									rules={[
										{
											required: true,
											type: 'number',
											min: 0,
											max: 1000,
											message: '范围在0-1000',
										},
									]}
									label=""
									name="allowUpdatePercent"
									style={{
										width: 150,
										display: 'inline-block',
										margin: '0 8px',
									}}
									preserve
								>
									<InputNumber precision={0} placeholder="请输入" addonAfter="%" />
								</Form.Item>
							)}
						</Form.Item>
					</>
				)
			},
		},
	]

	return (
		<>
			<Button
				type="primary"
				onClick={() => {
					setOpen(true)
				}}
			>
				设置
			</Button>
			{open ? (
				<Modal
					title="设置"
					visible={open}
					width={660}
					onOk={handleOk}
					destroyOnClose
					maskClosable={false}
					onCancel={handleCancelClick}
					confirmLoading={loading}
				>
					<IForm layout="vertical" form={form} formItemsConfig={formItemsConfig}></IForm>
				</Modal>
			) : null}
		</>
	)
}

export default SettingModal
